import React, { Component } from 'react'
import { Icon, Button, Table, Popconfirm, Switch, Form, Input } from 'antd'
import { IndexLink, Link } from 'react-router'
import EditableCell from './EditableCell'
import AddTermInput from './AddTermInput'



const FormItem = Form.Item;


export class TermsHome extends Component {
  constructor(props) {
    super(props);
    this.columns = [{
      title: '启用',
      dataIndex: 'terms_enable',
      key: 'terms_enable',
      render: (text, record, index) => <Switch defaultChecked={record.terms_enable} 
                                           checked={record.terms_enable}  
                                          checkedChildren={'开'} 
                                          onChange={(checked)=>this.updateOneTerm(record,'terms_enable',checked)}
                                          unCheckedChildren={'关'} />,
    }, {
      title: '活动名称',
      dataIndex: 'terms_name',
      key: 'terms_name',
      render: (text, record, index) => (
        <EditableCell
          value={text}
          record={record}
          updateOneTerm={this.updateOneTerm}
        />),
    }, {
      title: '常规设定',
      dataIndex: 'time',
      key: 'time',
      render: (text, record) => (<div className="setting">
                        <p>
                        <span className="setting-item">题目顺序随机</span>
                        <Switch defaultChecked={record.terms_random_enable}  
                                checked={record.terms_random_enable} 
                                checkedChildren={'开'} 
                                onChange={(checked)=>this.updateOneTerm(record,'terms_random_enable',checked)}
                                unCheckedChildren={'关'}  />
                        </p>
                        <p>
                        <span className="setting-item">可返回答案</span>
                        <Switch defaultChecked={record.terms_answers_enable}  checkedChildren={'开'}
                                checked={record.terms_answers_enable} 
                                onChange={(checked)=>this.updateOneTerm(record,'terms_answers_enable',checked)}
                                unCheckedChildren={'关'} />
                        </p>
                        <p>
                        <span className="setting-item">返回排名</span>
                        <Switch defaultChecked={record.terms_rank_enable}   checkedChildren={'开'} 
                                checked={record.terms_rank_enable} 
                                onChange={(checked)=>this.updateOneTerm(record,'terms_rank_enable',checked)}
                                unCheckedChildren={'关'} />
                        </p>
                      </div>)

    }, {
      title: '功能',
      dataIndex: 'address',
      key: 'address',
      render: (text, record) => (<div className="setting">
                      <p>
                      <Button type="primary"> 
                          <Link to={`/terms/manager/${record._id}`} activeClassName='route--active'>
                            管理题目
                          </Link></Button>
                      </p>
                      <p><Button type="primary">统计查看</Button></p>
                      <p><Button type="primary">使用规则</Button></p>
                    </div>)
    }, {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Popconfirm title="确认删除咩?" onConfirm={this.deleteOneUpHandler(record._id)}>
              <a href="#">Delete</a>
            </Popconfirm>

      ),
    }];
    this.state = {
      tableDataLoading: false,

    }

    this.deleteOneUpHandler = this.deleteOneUpHandler.bind(this)
  }

  updateOneTerm = (record, pop, value) => {
    // console.log(record, pop, value)
    var popObj = {
      [pop]: value
    }

    var newTerm = Object.assign({}, record, popObj);
    // console.log(newTerm,popObj)
    this.props.updateOneTermById(newTerm)
  }
  deleteOneUpHandler(id) {
    // console.log(id)
    return () => {
      this.props.deleteOneTermById(id);
    }
  }
  componentWillMount() {
    // console.log('组件渲染前', this.props)
    this.props.getAllTerms()
  }
  render() {
    const { termslist } = this.props.terms || [];

    return (
          <div className="container-terms">
            <div className="add-columns">
              <AddTermInput addOneTerm={this.props.addOneTerm} />
            </div>
            <Table columns={this.columns} 
                   dataSource={termslist}  
                   loading={this.state.termsTableLoading}
                   updateOneTermById={this.props.updateOneTermById}
                    />
          </div>

    )
  }
}


export default TermsHome
